<template>
    <div class="banner-wrapper" style="width:100%;position: relative;transition-property: scale, opacity;transition-duration: .1s;"
        :style="{
            height:data.height,
            scale:data.visible?1:1.01,
            opacity:data.visible?1:0
        }"
    >
        <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1004;backdrop-filter: blur(20px);opacity: 1;"
            :style="{
                backgroundColor:appData.theme.background
            }"
        >
            <BannerScroll :app-data="appData" :banner-data="data" :banners="data.banners"></BannerScroll>
            <div style="width: 100%;height: 100%;z-index: 1005;position: absolute;left: 0;top: 0;backdrop-filter: blur(10px);"></div>
        </div>

        <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1006;">
          <BannerScroll :app-data="appData" :banner-data="data" :banners="data.banners"></BannerScroll>
        </div>

        <div style="width: 18px;height: 40px;position: absolute;right: 10px;transform: translateY(-50%);text-align: center;box-shadow: 0 4px 10px rgba(0,0,0,0.1);backdrop-filter: blur(20px);z-index: 1010;"
          :style="{
            top:(data.heightNum / 2).toString() + 'px',
            backgroundColor:appData.theme.background
          }"
          class="banner-control"
          @click="rightClick();resetTimer();"
        >
          <svg style="transform: translateY(-50%);" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path d="M16 9.162a1 1 0 011.648-.762l17.456 14.838a1 1 0 010 1.524L17.648 39.599A1 1 0 0116 38.838V9.162z"  fill="currentColor"/></svg>
        </div>

        <div style="width: 18px;height: 40px;position: absolute;left: 10px;transform: translateY(-50%);text-align: center;box-shadow: 0 4px 10px rgba(0,0,0,0.1);backdrop-filter: blur(20px);z-index: 1010;"
          :style="{
            top:(data.heightNum / 2).toString() + 'px',
            backgroundColor:appData.theme.background
          }"
          class="banner-control"
          @click="leftClick();resetTimer();"
        >
          <svg style="transform: translateY(-50%);" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path d="M30.311 6.604C30.948 6 32 6.451 32 7.33v33.342c0 .878-1.052 1.33-1.689.725L12.763 24.725a1 1 0 010-1.   45l17.548-16.67z" fill="currentColor"/></svg>
        </div>

    </div>
</template>

<script>
import BannerScroll from './bannerScroll.vue';

export default{
    data() {
        return {
            data: {
                height: '480px',
                status: 0,
                heightNum: 480,
                size:undefined,
                showAnimation:false,
                currentIndex:2,
                operating:false,
                banners:undefined,
                moveNum:1,
                currentBannerWidth:'',
                currentBannerTitleFontSize:'',
                otherBannerTitleFontSize:'',
                currentTime:5000,
                maxTime:5000,
                visible:false
            }
        };
    },
    mounted() {
        setTimeout(() => {
            this.data.visible = true
        }, 10);
        setInterval(() => {
            if (this.appData.pageSize.width > 960) {
                this.data.status = 0;
                this.data.currentBannerWidth = '760px'
            }
            else if(this.appData.pageSize.width > 640){
                this.data.status = 1;
                this.data.currentBannerWidth = 'calc(' + this.appData.pageSize.width.toString() + 'px - 200px)' 
            }else{
                this.data.status = 2;
                this.data.currentBannerWidth = 'calc(' + this.appData.pageSize.width.toString() + 'px - 160px)' 
            }
            if(this.appData.pageSize.width > 1965){
                this.data.moveNum = 4
            }else if(this.appData.pageSize.width > 1635){
                this.data.moveNum = 3
            }else if(this.appData.pageSize.width > 1305){
                this.data.moveNum = 2
            }else{
                this.data.moveNum = 1
            }
            if (this.appData.pageSize.width > 1270) {
                this.data.height = '480px';
                this.data.heightNum = 480
                this.data.size = 'large'
                this.data.currentBannerWidth = '860px'
                this.data.currentBannerTitleFontSize = '28px'
                this.data.otherBannerTitleFontSize = '20px'
            }
            else {
                this.data.height = '425px';
                this.data.heightNum = 425
                this.data.size = 'small'
                //this.data.currentBannerWidth = '760px'
                this.data.currentBannerTitleFontSize = '24px'
                this.data.otherBannerTitleFontSize = '16px'
            }
        }, 10);
        this.data.banners = JSON.parse(JSON.stringify(this.banners)) 
        this.data.currentTime = this.data.maxTime
        setInterval(() => {
            if(this.data.currentTime==0){
                this.data.currentTime = this.data.maxTime
                this.rightClick()
            }
            this.data.currentTime -= 10
        }, 10);
    },
    methods: {
        resetTimer(){
            this.data.currentTime = this.data.maxTime
        },
        rightClick(){
            if(this.data.operating){
                return
            }
            this.data.operating = true
            this.data.showAnimation = true
            setTimeout(() => {
                this.data.currentIndex += this.data.moveNum
                setTimeout(() => {
                    this.data.showAnimation = false
                    setTimeout(() => {
                        for(let i=0;i<this.data.moveNum;i++){
                            this.modifyBannerArray(1)
                        }
                        this.data.operating = false
                    }, 1);
                }, 1000);
            }, 1);
        },
        leftClick(){
            if(this.data.operating){
                return
            }
            this.data.operating = true
            this.data.showAnimation = true
            setTimeout(() => {
                this.data.currentIndex -= 1
                setTimeout(() => {
                    this.data.showAnimation = false
                    setTimeout(() => {
                        this.modifyBannerArray(0)
                        this.data.operating = false
                    }, 1);
                }, 1000);
            }, 1);
        },
        modifyBannerArray(op){
            let temp = []
            if(op==1){
                for(let i=1;i<this.data.banners.length;i++){
                    temp.push(JSON.parse(JSON.stringify(this.data.banners[i])))
                }
                temp.push(JSON.parse(JSON.stringify(this.data.banners[0])))
            }else{
                temp.push(JSON.parse(JSON.stringify(this.data.banners[this.data.banners.length-1])))
                for(let i=0;i<this.data.banners.length-1;i++){
                    temp.push(JSON.parse(JSON.stringify(this.data.banners[i])))
                }
            }
            for(let i=0;i<temp.length;i++){
                temp[i]['index'] = JSON.parse(JSON.stringify(i))
            }
            this.data.banners = JSON.parse(JSON.stringify(temp))
            this.data.currentIndex = 2
        }
    },
    props: {
        appData: undefined,
        banners: undefined
    },
    components: { BannerScroll }
}
</script>

<style scoped>

.banner-control{
  opacity: 0;
  transition: opacity .1s;
  border-radius: 5px;
  color: var(--color-neutral-6);
  padding-top: 20px;
}

.banner-control:hover{
  color: var(--color-neutral-10);
  padding-top: 22px;
}

.banner-control:active{
  color: var(--color-neutral-6);
  padding-top: 20px;
}

.banner-control:active svg{
  scale: 1 !important;
}

.banner-control:hover svg{
  scale: 1.2;
}

.banner-wrapper:hover .banner-control{
  opacity: 1 !important;
}

</style>
